<template>
  <view class="product-info-block">
    <view
      v-if="product.sku_type === 'MULTI'"
      class="product-info-item"
      @click="$emit('show-select')"
    >
      <view class="label">
        选择
      </view>
      <view class="product-sku-list">
        <view class="image-wrapper">
          <v-image
            v-for="sku in product.sku_list"
            :key="sku.id"
            height="50rpx"
            width="50rpx"
            border-radius="4rpx"
            :src="sku.image"
            mode="aspectFill"
          />
        </view>
        <view class="sku-text">
          {{ `共${product.sku_list.length}种` }}
        </view>
      </view>
      <wd-icon name="arrow-right" size="24rpx" color="#999999" />
    </view>
    <view
      v-if="propertyTag?.length"
      class="product-info-item"
      @click="$emit('show-property')"
    >
      <view class="label">
        属性
      </view>
      <view class="product-info-content">
        {{ propertyTag.map((item) => item.name).join('、') }}
      </view>
      <wd-icon name="arrow-right" size="24rpx" color="#999999" />
    </view>
    <view
      v-if="guaranteeTag.length"
      class="product-info-item"
      @click="$emit('show-guarantee')"
    >
      <view class="label">
        保障
      </view>
      <view class="product-info-content">
        {{ guaranteeTag.join('·') }}
      </view>
      <wd-icon name="arrow-right" size="24rpx" color="#999999" />
    </view>
    <view class="product-info-item">
      <view class="label">
        发货
      </view>
      <view class="product-info-content">
        {{ deliveryText }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  product: SpuVO;
}>();

defineEmits<{
  'show-select': [];
  'show-guarantee': [];
  'show-property': [];
}>();

const propertyTag = computed(() => {
  const list = props.product.spu_tag_list;
  if (!list) return undefined;
  const tagList = list.filter((item) => item.type === 'PROPERTY');
  return tagList.length > 0 ? tagList : undefined;
});

const guaranteeTag = computed(() => {
  const list: string[] = [];
  const guarantees = props.product.guarantee_content?.guarantees;
  if (guarantees?.includes(1)) list.push('交易保障');
  if (guarantees?.includes(2)) list.push('消费者保障');
  if (guarantees?.includes(3)) list.push('破损补偿');
  if (guarantees?.includes(4)) list.push('七天无理由退货');
  if (guarantees?.includes(5)) list.push('正品保障');
  if (guarantees?.includes(6)) list.push('假一赔十');
  return list;
});

const deliveryText = computed(() => {
  switch (props.product.guarantee_content?.time_options) {
    case 1:
      return '当天发货';
    case 2:
      return '24小时内发货';
    case 3:
      return '48小时内发货';
    case 4:
      return '72小时内发货';
    default:
      return '';
  }
});
</script>

<style lang="scss" scoped>
.product-info-block {
  position: relative;
  margin: 0 24rpx 24rpx;
  padding: 18rpx 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24rpx;

  .product-info-item {
    height: 50rpx;
    display: flex;
    align-items: center;
    gap: 24rpx;
    .label {
      color: #666666;
      flex-shrink: 0;
    }
    .product-sku-list {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 16rpx;
      .image-wrapper {
        overflow: hidden;
        display: flex;
        gap: 16rpx;
      }
      .sku-text {
        flex-shrink: 0;
        background-color: #f5f6fa;
        border-radius: 4rpx;
        padding: 0 8rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        font-size: 24rpx;
        line-height: 36rpx;
        color: #999999;
      }
    }
    .product-info-content {
      flex: 1;
      flex-shrink: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
    }
  }
}
</style>
